import React, { useRef, useState } from 'react';
import { axconst } from '@/shared/axconst';
import Search from './components/search';
import Import from './components/import';
import Create from './components/create';
import AxColumnAction from '@/components/AxList/AxColumnAction';
import { AxStandardCardButtonType, AxStandardCardFilterType } from '@/components/AxList/AxStandardLayout/data.d';
import { AxStandardWideList } from '@/components/AxList/AxStandardWideList';
import { axurl } from '@/shared/axurl';
import { axhttp } from '@/shared/axhttp';
import { AxColumnEnum, AxColumnTime } from '@/components/AxList';
import { message } from 'antd';

const url = axurl.store.goods.data;
const { postFormX } = axhttp;
const Index: React.FC<any> = props => {
    const [importVisible, setImportVisible] = useState(false);
    const ref = useRef<any>({});
    /** 配置列 */
    const columns: any = [
        {
            title: '供应商',
            dataIndex: 'supplierName',
            width: axconst.width.supplierName,
        },
        {
            title: '产品名称',
            dataIndex: 'name',
            width: axconst.width.productName,
        },
        {
            title: 'CAS编码',
            dataIndex: 'casCode',
            width: axconst.width.casCode,
        },
        {
            title: '产品分类',
            dataIndex: 'categoryName',
            width: axconst.width.categoryName,
        },
        {
            title: '纯度',
            dataIndex: 'purity',
            width: axconst.width.purity,
        },
        {
            title: '单价',
            dataIndex: 'price',
            width: axconst.width.price,
        },
        {
            title: '产品性状',
            dataIndex: 'character',
            width: axconst.width.character,
        },
        {
            title: '单位标识',
            dataIndex: 'unit',
            width: axconst.width.unit,
        },
        {
            title: '包装单位',
            dataIndex: 'onePackingUnit',
            width: axconst.width.onePackingUnit,
        },
        {
            title: '单件容量',
            dataIndex: 'oneCapacity',
            width: axconst.width.oneCapacity,
        },
        {
            title: '包装规格',
            dataIndex: 'packingSpec',
            width: axconst.width.packingSpec,
        },
        {
            title: '产品别名',
            dataIndex: 'alias',
            width: axconst.width.alias,
        },
        {
            title: '英文别名',
            dataIndex: 'eName',
            width: axconst.width.eName,
        },
        {
            title: '品牌',
            dataIndex: 'brand',
            width: axconst.width.brand,
        },
        {
            title: '生产厂家',
            dataIndex: 'factory',
            width: axconst.width.factory,
        },
        {
            title: '生产日期',
            dataIndex: 'productDate',
            width: axconst.width.times,
            render: (val: any) => AxColumnTime({ format: 'yyyy-MM-dd', value: val }),
        },
        {
            title: '有效期天数',
            dataIndex: 'validityDays',
            width: axconst.width.validityDays,
        },
        {
            title: '危险源类别',
            dataIndex: 'orgName16',
            width: axconst.width.five,
        },
        {
            title: '分子式',
            dataIndex: 'formula',
            width: axconst.width.formula,
        },
        {
            title: '分子量',
            dataIndex: 'molecular',
            width: axconst.width.molecular,
        },
        {
            title: '技术参数',
            dataIndex: 'techParameter',
            width: axconst.width.techParameter,
        },
        {
            title: '产品规格',
            dataIndex: 'productSpec',
            width: axconst.width.productSpec,
        },
        {
            title: '库存',
            dataIndex: 'stock',
            width: axconst.width.stock,
        },
        {
            title: '图片',
            dataIndex: 'image',
            width: axconst.width.image,
        },
        {
            title: '产品状态',
            dataIndex: 'productStatus',
            width: axconst.width.productStatus,
            render: (val: any) => AxColumnEnum({ enumName: 'productStatus', value: val }),
        },
        {
            title: '操作',
            fixed: 'right',
            width: axconst.width.operate4,
            render: (val: any, record: any) => (
                <AxColumnAction
                    buttons={[
                        {
                            text: '上架',
                            group: false,
                            onClick: () => handleOn(record.id),
                        },
                        {
                            text: '下架',
                            group: false,
                            onClick: () => handleOff(record.id),
                        },
                    ]}
                />
            ),
        },
    ];

    const handleOn = (productId: any) => {
        return postFormX(url.updateOn, null, { productId }).then(res => {
            message.success('上架成功');
            ref.current.handleRefresh();
        });
    }

    const handleOff = (productId: any) => {
        return postFormX(url.updateOff, null, { productId }).then(res => {
            message.success('下架成功');
            ref.current.handleRefresh();
        });
    }

    const importProps = {
        visible: importVisible,
        handleVisible: setImportVisible,
    }

    /** 配置操作按钮 */
    const button: AxStandardCardButtonType[] = [
        {
            type: 'create',
            text: '添加商品',
        },
        {
            type: 'import',
            text: '导入商品',
        },
    ];

    const filter: AxStandardCardFilterType[] = [];

    return (
        <>
            <AxStandardWideList
                ref={ref}
                url={url}
                columns={columns}
                button={button}
                filter={filter}
                simpleSearchField='name'
                simpleSearchPlaceholder='搜索产品名称'
                AdvancedSearch={Search}
                CreateComponent={Create}
                ImportComponent={Import}
            />
            {importVisible && <Import {...importProps} />}
        </>
    );
};

export default Index;
